<style>
  .userform{
    display:inline-block;
    min-width:300px;
  }
  .cardD{
    min-height: 600px;
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
  }
  .styleP{
    text-align: left;
    margin-bottom: 20px;
    margin-left: 32px;
  }
</style>
<template>
  <div>
    <Card class="cardD" dis-hover>
      <Card :bordered="false" dis-hover>
        <p slot="title">
          <Icon type="person"></Icon>
          {{$t('index.info')}}
        </p>
        <div>
          <Form
            ref="userForm"
            :model="userForm"
            :label-width="100"
          >
            <h3 class="styleP"><Icon type="ios-happy-outline" size="30"/>  {{userForm.username}}</h3>
            <FormItem :label="$t('index.username')" prop="username">
              <Input v-model="userForm.username" readonly></Input>
            </FormItem>
            <FormItem :label="$t('index.surname')" prop="surname">
              <Input v-model="userForm.surname" readonly></Input>
            </FormItem>
            <FormItem :label="$t('index.dept')" prop="dept">
              <Input v-model="userForm.dept" readonly></Input>
            </FormItem>
            <FormItem :label="$t('index.phone')" prop="phone">
              <Input v-model="userForm.phone" readonly></Input>
            </FormItem>
            <FormItem :label="$t('index.password')" style="text-align: left;">
              <i-button type="primary" size="large" @click="showEditPassword">{{$t('index.changepass')}}</i-button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </Card>
    <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
      <h3 slot="header" style="color:#2D8CF0;text-align:center;">{{$t('index.changepass')}}</h3>
      <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="110" label-position="right" :rules="passwordValidate">
        <FormItem :label="$t('index.oldpass.label')" prop="oldPass" :error="oldPassError">
          <Input type="password" v-model="editPasswordForm.oldPass" :placeholder="$t('index.oldpass.place')" ></Input>
        </FormItem>
        <FormItem :label="$t('index.newpass.label')" prop="newPass">
          <Input type="password" v-model="editPasswordForm.newPass" :placeholder="$t('index.newpass.place')"></Input>
        </FormItem>
        <FormItem :label="$t('index.confirmpass.label')" prop="rePass">
          <Input type="password" v-model="editPasswordForm.rePass" :placeholder="$t('index.confirmpass.place')"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <i-button type="text" @click="cancelEditPass">{{$t('common.cancel')}}</i-button>
        <i-button type="primary" @click="saveEditPass">{{$t('common.submit')}}</i-button>
      </div>
    </Modal>
  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64;
  export default {
    name: 'home_index',
    data () {
      const valideRePassword = (rule, value, callback) => {
        if (value !== this.editPasswordForm.newPass) {
          callback(new Error(this.$t('index.insamepass')));
        } else {
          callback();
        }
      };
      return {
        userForm: {
          username: '',
          surname: '',
          dept: '',
          phone:''
        },
        uid: '', // 登录用户的userId
        editPasswordModal: false, // 修改密码模态框显示
        savePassLoading: false,
        oldPassError: '',
        editPasswordForm: {
          oldPass: '',
          newPass: '',
          rePass: ''
        },
        passwordValidate: {
          oldPass: [
            { required: true, message: this.$t('index.oldpass.place'), trigger: 'blur' }
          ],
          newPass: [
            { required: true, message: this.$t('index.newpass.place'), trigger: 'blur' },
            { min: 6, message: this.$t('index.newpass.min'), trigger: 'blur' },
            { max: 30, message: this.$t('index.newpass.max'), trigger: 'blur' }
          ],
          rePass: [
            { required: true, message: this.$t('index.confirmpass.place'), trigger: 'blur' },
            { validator: valideRePassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      showEditPassword () {
        this.editPasswordModal = true;
      },
      cancelEditPass () {
        this.editPasswordModal = false;
      },
      saveEditPass () {
        this.$refs['editPasswordForm'].validate((valid) => {
          if (valid) {
            this.savePassLoading = true;
            // 先判断用户输入的两次新密码是否相同
            var newP = this.editPasswordForm.newPass
            var confirmP = this.editPasswordForm.rePass
            if(newP != confirmP){
              this.$Message.error(this.$t('index.insamepass'))
            }else{
              this.changePwd();
            }
          }
        });
      },
      changePwd(){
        // you can write ajax request here
        /*this.$http({
          url: this.$log + 'changePass.do',
          method:'POST',
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
          data: {
            'oldpass': this.editPasswordForm.oldPass,
            'newpass': this.editPasswordForm.newPass
          }
        }).then((response)=>{
          // console.log(response)
          var code = response.data.code
          var msg = response.data.msg
          // console.log(response)
          if(code == 0){
            window.sessionStorage.clear()
            localStorage.clear()
            this.$store.commit('clearOpenedSubmenu');
            this.$router.push({
              name: 'Login'
            });
          }else{
            this.$Message.error(response.data.errors)
          }
          this.editPasswordModal = false
        })*/
      },
      init () {
        var username_orders = Base64.encode('username_orders')
        var dd = Base64.encode('dd')
        this.userForm.name = Base64.decode(window.sessionStorage.getItem(username_orders));
        var uid = Base64.decode(window.sessionStorage.getItem(dd))
        this.getOwnInfo(uid)
      },
      getOwnInfo(uid){
        /*this.$http({
          url: this.$url+'admin/find.do',
          method:'POST',
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
          data: {
            'uid': uid
          }
        }).then((response)=>{
          // console.log(response)
          var code = response.data.code
          // console.log(response)
          if(code == 0){
            var users = response.data.findOne;
            this.userForm.username = users.username
            this.userForm.surname = users.surname
            this.userForm.dept = users.deptName
            this.userForm.phone = users.phone
          }
        })*/
      }
    },
    mounted () {
      this.init();
    }
  };
</script>
